<template>
    <div class="main">

        <div class="search">
            <input v-model="input" placeholder="请输入景区或博物馆名称"></input>
            <img src="../assets/image/look.png" @click="find"></img>
        </div>

        <div id="container" class="map" tabindex="0"></div>

        <transition name="fade">
            <div class="control" v-show="show" @click="router">
                <div class="controlTop">
                    <div class="controlTop_title">
                        {{title}}
                    </div>
                    <div v-if="need" class="controlTop_status">
                        需要预约
                    </div>
                    <div v-else class="controlTop_status">
                        语音导览
                    </div>
                </div>
                <div class="controlBottom">
                    <div class="controlBottomLeft">
                        杭州市拱墅区 {{kilometre}}
                    </div>
                    <div class="controlBottomRight">
                        <p>详情</p>
                        <img src="../assets/image/right.png"></img>
                    </div>
                </div>
            </div>
        </transition>

    </div>
</template>

<script>
	export default {
        data(){
          	return {
                list: [
                    {
                        image: 'https://museum-voice.bowu66.com/image/test1-3.png',
                        position1: 120.139844,
                        position2: 30.318101,
                        name: '香积寺',
                        need: false,

                    },
                    {
                        image: 'https://museum-voice.bowu66.com/image/test2-2.png',
                        position1: 120.153876,
                        position2: 30.367693,
                        name: '拱宸桥',
                        need: true,
                    },
                ],
                markers: [],
                center: [120.161086,30.338363],
                zoom: 12,
                title: '',
                show:false,
                input: '',
                map: '',
                latitude: '',
                longitude: '',
                kilometre: '',
                need: false,



          	}
        },
        mounted(){
            this.getLocation()
            // this.latitude = Number(this.$route.query.latitude)
            // this.longitude = Number(this.$route.query.longitude)
        	this.draw()
        },
        methods:{
            draw(){
                let that = this
                var map = new AMap.Map('container', {
                    mapStyle: "amap://styles/21c8a59158da4f9be430fee8d0b60b5a",
                    resizeEnable: true,
                    center: this.center,
                    zoom: this.zoom,
                    zooms: [11,15],
                    layers: [
                        new AMap.TileLayer(),
                        new AMap.ImageLayer({
                            url: 'https://museum-voice.bowu66.com/image/testMapMap.png',
                            // url: 'https://museum-voice.bowu66.com/image/testMap.jpg',
                            bounds: new AMap.Bounds(
                                [120.088364,30.279243],
                                [120.226344,30.409895]
                            ),
                            zooms: [11, 15]
                        })
                    ]
                });
                this.map = map

                this.markers = []
                for(let i=0;i<this.list.length;i++){
                    this.markers.push(new AMap.Marker({
                        position: new AMap.LngLat(this.list[i].position1,this.list[i].position2),
                        icon: new AMap.Icon({
                            size: new AMap.Size(39*1.2, 51*1.5),
                            image: this.list[i].image,
                            imageSize: new AMap.Size(39*1.2, 51*1.2),
                            imageOffset: new AMap.Pixel(0, 0)
                        }),
                        offset: new AMap.Pixel(-20, -20)
                    }))
                }
                map.add(this.markers)

                this.markerrender(map)
                map.on('zoomchange', function(e) {
                    that.zoom = map.getZoom()
                })
            },

            markerrender(map) {
                let that = this
                let newIcon = [
                    new AMap.Icon({
                        size: new AMap.Size(47.4*1.5, 64.2*1.5),
                        image: 'https://museum-voice.bowu66.com/image/test1-1.png',
                        imageSize: new AMap.Size(47.4*1.5, 64.2*1.5),
                        imageOffset: new AMap.Pixel(0, 0)
                    }),
                    new AMap.Icon({
                        size: new AMap.Size(47.4*1.5, 64.2*1.5),
                        image: 'https://museum-voice.bowu66.com/image/test2-1.png',
                        imageSize: new AMap.Size(47.4*1.5, 64.2*1.5),
                        imageOffset: new AMap.Pixel(0, 0)
                    })
                ]
                let oldIcon = [
                    new AMap.Icon({
                        size: new AMap.Size(39*1.2, 51*1.2),
                        image: 'https://museum-voice.bowu66.com/image/test1-3.png',
                        imageSize: new AMap.Size(39*1.2, 51*1.2),
                        imageOffset: new AMap.Pixel(0, 0)
                    }),
                    new AMap.Icon({
                        size: new AMap.Size(39*1.2, 51*1.2),
                        image: 'https://museum-voice.bowu66.com/image/test2-2.png',
                        imageSize: new AMap.Size(39*1.2, 51*1.2),
                        imageOffset: new AMap.Pixel(0, 0)
                    }),
                ]
                for (let i=0;i<this.markers.length;i++){
                    AMap.event.addListener(this.markers[i],"click",function () {
                        for(let j=0;j<that.markers.length;j++){
                            that.markers[j].setIcon(oldIcon[j])
                            that.markers[j].setOffset(new AMap.Pixel(-20, -20))
                        }
                        setTimeout(function(){
                            wx.miniProgram.navigateTo({url:'/pages/index/index?id=3728&type=true'}) 
                        },100)
                        if(that.title != that.list[i].name){
                            that.show = false
                            setTimeout(function(){
                                that.show = true
                                that.need = that.list[i].need
                                that.title = that.list[i].name
                                that.getKilometre(that.list[i].position1,that.list[i].position2)
                            },300)
                        }
                        that.markers[i].setIcon(newIcon[i])
                        that.markers[i].setOffset(new AMap.Pixel(-23, -23))
                        map.setZoomAndCenter(that.zoom,[that.list[i].position1,that.list[i].position2])
                    })
                }
            },

            router(){
                if(this.need){
                    wx.miniProgram.navigateTo({url:'/pages/index/index?id=3728&type=true'}) 
                }else{
                    wx.miniProgram.navigateTo({url:'/guide/museum/index'}) 
                }
            },
            find(){
                let that = this
                for(let i=0;i<this.list.length;i++){
                    if(this.list[i].name == this.input){

                        this.input = ''
                        let that = this
                        let newIcon = new AMap.Icon({
                            size: new AMap.Size(60, 60),
                            image: 'https://museum-voice.bowu66.com/image/test1-1.png',
                            imageSize: new AMap.Size(60, 60),
                            imageOffset: new AMap.Pixel(0, 0)
                        })
                        let oldIcon = new AMap.Icon({
                            size: new AMap.Size(40, 40),
                            image: 'https://museum-voice.bowu66.com/image/test2-1.png',
                            imageSize: new AMap.Size(40, 40),
                            imageOffset: new AMap.Pixel(0, 0)
                        })
                        for(let j=0;j<this.markers.length;j++){
                            this.markers[j].setIcon(oldIcon)
                            this.markers[j].setOffset(new AMap.Pixel(-20, -20))
                        }
                        if(this.title != this.list[i].name){
                            this.show = false
                            setTimeout(function(){
                                that.show = true
                                that.need = that.list[i].need
                                that.title = that.list[i].name
                                that.getKilometre(that.list[i].position1,that.list[i].position2)
                            },300)
                        }
                        this.markers[i].setIcon(newIcon)
                        this.markers[i].setOffset(new AMap.Pixel(-30, -38))
                        this.map.setZoomAndCenter(this.zoom,[this.list[i].position1,this.list[i].position2])
                    }
                }
            },

            getKilometre(position1,position2){
                if(this.kilometre == '未获取定位权限'){
                    return false
                }
                var radLat1 = this.rad(this.latitude)
                var radLat2 = this.rad(position1)
                var a = radLat1 - radLat2
                var b = this.rad(this.longitude) - this.rad(position2)
                var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
                    Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
                s = s * 6378.137
                s = Math.round(s * 10000) / 10000
                var distance = s
                var distance_str = ""
                if (parseInt(distance) >= 1) {
                    distance_str = distance.toFixed(0) + "公里"
                } else {
                    distance_str = (distance * 1000).toFixed(0) + "米"
                }
                this.kilometre = "距您" + distance_str
            },
            rad(d){
                return d * Math.PI / 180.0
            },

            getLocation(){
                if (navigator.geolocation){ 
                    navigator.geolocation.getCurrentPosition(this.showPosition,this.showError)
                }else{ 
                    this.kilometre = '未获取定位权限'
                } 
            },
            showPosition(position){
               this.latitude = position.coords.latitude
               this.longitude = position.coords.longitude
            },
            showError(error){
                this.kilometre = '未获取定位权限'
            },




        }
   }
</script>

<style scoped>
    .main{
        width:100%;
        height:100%;
        position: absolute;
        font-size: 50px
    }
    #container {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .search{
        width:6.9rem;
        height:0.5rem;
        background: rgba(255,255,255,0.8);
        border-radius: 25px;
        position: absolute;
        top:0.14rem;
        left:0.3rem;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
    }
    .search input{
        width:6rem;
        height:100%;
        border:none;
        text-indent: 0.22rem;
        outline: none;
        background: none;
        font-size: 0.22rem;
        color:#000000;
    }
    .search img{
        width:0.32rem;
        height:0.32rem;
        margin-right:0.16rem;
    }
    ::-webkit-input-placeholder {
        color: #9A9A9A;
        font-size: 0.22rem;
    }
    .control{
        width:6.9rem;
        height:1.4rem;
        background: white;
        position: absolute;
        bottom:0.32rem;
        left:0.3rem;
        border-radius: 0.1rem;
        box-shadow: 0 0 0.1rem rgba(0,0,0,0.2)
    }
    .controlTop{
        width:100%;
        height:0.4rem;
        margin-top:0.3rem;
        display: flex;
        align-items: center;
    }
    .controlTop_title{
        font-size: 0.3rem;
        font-weight: bold;
        margin-left:0.25rem;
    }
    .controlTop_status{
        width:1.08rem;
        height:0.36rem;
        background: #FFF7E9;
        color:#F49037;
        font-size: 0.2rem;
        text-align: center;
        line-height: 0.36rem;
        margin-left:0.15rem;
    }
    .controlBottomLeft{
        color:#000000;
        font-size: 0.24rem;
        margin-left:0.25rem;
    }
    .controlBottom{
        width:100%;
        height:0.4rem;
        margin-top:0.1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color:#000000;
    }
    .controlBottomRight{
        font-size: 0.24rem;
        color:#309CE8;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right:0.25rem;
    }
    .controlBottomRight img{
        width:0.16rem;
        height:0.16rem;
        margin-left:0.12rem;
    }


    .fade-enter, .fade-leave-to {
        bottom: 0;
    }
    .fade-enter-active, .fade-leave-active {
        transition: bottom .5s
    }





    
</style>